<template>
  <van-grid type="aligned" column-num="3" :border="false" square custom-class="sub-item-content">
    <van-grid-item
      v-for="item in list"
      :key="item.id"
      class="sub-item-list"
      @click.stop="gotoCateList(item.id)"
      use-slot
    >
      <div class="sub-item-box">
        <div class="thumb">
          <img :src="item.thumb || item.logo || emptyImg" />
        </div>
        <div class="name">{{item.name}}</div>
      </div>
    </van-grid-item>
  </van-grid>
</template>

<script>
export default {
  props: {
    list: {
      default: []
    },
    parentId: {
      type: Number || String,
      default: 0
    }
  },
  methods: {
    /**
     * 子类点击跳转
     * @param id 分类id
     */
    gotoCateList: function(id) {
      if (this.parentId) {
        this.$router.push(this.fun.getUrl('catelist', { id }));
      } else {
        this.$router.push(this.fun.getUrl('brandgoods', { id }));
      }
      
    }
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.sub-item-list {
  text-align: center;

  .sub-item-box {
    width: 100%;
    height: auto;
    /* overflow: hidden; */
    display: flex;
    flex-direction: column;
  }

  .sub-item-box {

    .thumb {
      flex: 0;

      img{
        max-width: 60%;
      }
    }

    .name {
      color: #666666;
      font-size: 12px;
      height: 30px;
      line-height: 30px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 1;
    }
  }
}
</style>